<template>
  <div>
    <h1>九宫格抽奖</h1>
    <LuckyGrid
      width="200px"
      height="200px"
      ref="luckyGridRef"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </div>
  <!-- <lucky-wheel width="200px" height="200px" :blocks="blocks" :prizes="prizes" /> -->
</template>

<script lang="ts">
import { ref, defineComponent, toRaw } from "vue";
export default defineComponent({
  // export default {
  name: "Grid",
  setup(props) {
    const luckyGridRef = ref();
    const blocks = ref([
      { padding: "10px", background: "#869cfa" },
      { padding: "10px", background: "#e9e8fe" },
    ]);
    const prizes = ref([
      { x: 0, y: 0, fonts: [{ text: "老虎", top: "25%" }] },
      { x: 1, y: 0, fonts: [{ text: "狮子", top: "25%" }] },
      { x: 2, y: 0, fonts: [{ text: "熊猫", top: "25%" }] },
      { x: 2, y: 1, fonts: [{ text: "豹子", top: "25%" }] },
      { x: 2, y: 2, fonts: [{ text: "大象", top: "25%" }] },
      { x: 1, y: 2, fonts: [{ text: "金鱼", top: "25%" }] },
      { x: 0, y: 2, fonts: [{ text: "熊猫", top: "25%" }] },
      { x: 0, y: 1, fonts: [{ text: "猴子", top: "25%" }] },
    ]);

    const buttons = [
      {
        x: 1,
        y: 1,
        background: "#7f95d1",
        fonts: [{ text: "开始", top: "25%" }],
      },
    ];
    const defaultStyle = {
      background: "#b8c5f2",
    };

    const startCallBack = () => {
      // 开始游戏
      luckyGridRef.value.play();
      // 假设接口的请求速度是5s
      setTimeout(() => {
        // 5s后拿到后端返回的中奖索引
        const index = 0;
        // 然后停止游戏 (缓慢停止)
        luckyGridRef.value.stop(index);
      }, 5000);
    };
    const endCallBack = (prize) => {
      // 当完全停止时, 触发回调函数
      console.log(prize);
    };

    return {
      blocks,
      prizes,
      buttons,
      luckyGridRef,
      startCallBack,
      endCallBack,
      defaultStyle,
    };
  },
});

// };
</script>
